import classNames from "classnames";
import React from "react";

interface PreNextProps {
  prevClick: () => void;
  nextClick: () => void;
  curPageIdx?: number;
  totalPage?: number;
  className?: string;
}
export const NPrevNext = React.memo(
  ({
    prevClick,
    nextClick,
    curPageIdx,
    totalPage,
    className,
  }: // ...restProps
  PreNextProps) => {
    {
      return (
        <div className={classNames("flex justify-center py-14", className)}>
          <div
            className={`w-30 h-30 flex items-center justify-center bg-bgc-12 rounded-6 ${
              curPageIdx && curPageIdx != 1 ? "text-white" : "text-fcw-3"
            }`}
            style={{
              border: "1px solid var(--mantine-color-borderColor-0)",
            }}
            onClick={() => {
              if (curPageIdx === 1) return;
              prevClick();
            }}
          >
            {"Prev"}
          </div>
          <div
            className={"flex items-center mx-10 bg-bgc-8 px-4 border-solid rounded-6"}
            style={{
              border: "1px solid var(--mantine-color-borderColor-0)",
            }}
          >
            <span className='text-fcs-1 min-w-16 text-center'>{curPageIdx}</span>
            <span className='text-fcw-3 mx-2'>/</span>
            <span className='text-fcw-3 min-w-16 text-center'>{totalPage}</span>
          </div>
          <div
            className={`w-30 h-30 flex items-center justify-center bg-bgc-12 rounded-6  py-2 ${
              totalPage && curPageIdx != totalPage ? "text-white" : "text-fcw-3"
            }`}
            style={{
              border: "1px solid var(--mantine-color-borderColor-0)",
            }}
            onClick={() => {
              if (curPageIdx === totalPage || totalPage === 0) return;
              nextClick();
            }}
          >
            {"Next"}
          </div>
        </div>
      );
    }
  },
);
